<template>
    <div class="conference">
        <search :searchKey.sync="searchKey" 
                enterButton="搜索会议"
                placeholder="输入你感兴趣的会议名或关键字"
                @search="search()"/>
        <div class="jqzk animated fadeInRight">
            <h2 class="jqzk-title">- 近期召开 -</h2>
            <swiper :options="swiperOption" class="my-swiper" v-if="!loading">
                <swiper-slide class="swiper-slide" v-for="item in jqzk" :key="item.id">
                    <img :src="getImg(item.ming_cheng)" alt="">
                    <p class="c-title">{{item.ming_cheng}}</p>
                    <p class="c-time" style="color:orange">举办时间： {{item.ju_ban_shi_jian}}</p>
                    <p class="c-location" style="color:#4eadca">地点：{{item.di_dian}}</p>
                    <p class="c-theme">主题：{{item.zhu_ti}}</p>
                    <p class="c-th" style="color:#000">届数：{{item.jie_shu||'暂无数据'}}</p>
                    <button><a :href="item.wang_zhan" target="_blank">了解详情</a></button>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
            <div style="display:flex;flex-direction:row;justify-content:space-between" class="my-swiper" v-else>
                <swiper-slide class="swiper-slide">
                    <el-skeleton animated :loading="loading">
                        <template slot="template">
                        <div class="paper-list"  v-for="(item,index) in 1" :key="index">
                            <div>
                                <el-skeleton-item variant="text" style="height:120px;width:30%"  />
                                <el-skeleton-item variant="text" style="height:80px"  />
                                <el-skeleton-item variant="text" style="height:20px"  />
                                <el-skeleton-item variant="text" style="height:20px"  />
                                <el-skeleton-item variant="text" style="height:20px"  />
                                <el-skeleton-item variant="text" style="height:50px;width:40%"  />
                            </div>
                        </div>
                        </template>
                    </el-skeleton>
                </swiper-slide>
                <swiper-slide class="swiper-slide">
                    <el-skeleton animated :loading="loading">
                        <template slot="template">
                        <div class="paper-list pc1"  v-for="(item,index) in 1" :key="index">
                            <div>
                                <el-skeleton-item variant="text" style="height:120px;width:30%"  />
                                <el-skeleton-item variant="text" style="height:80px"  />
                                <el-skeleton-item variant="text" style="height:20px"  />
                                <el-skeleton-item variant="text" style="height:20px"  />
                                <el-skeleton-item variant="text" style="height:20px"  />
                                <el-skeleton-item variant="text" style="height:50px;width:40%"  />
                            </div>
                        </div>
                        </template>
                    </el-skeleton>
                </swiper-slide>
                <swiper-slide class="swiper-slide">
                    <el-skeleton animated :loading="loading">
                        <template slot="template">
                        <div class="paper-list pc2"  v-for="(item,index) in 1" :key="index">
                            <div>
                                <el-skeleton-item variant="text" style="height:120px;width:30%"  />
                                <el-skeleton-item variant="text" style="height:80px"  />
                                <el-skeleton-item variant="text" style="height:20px"  />
                                <el-skeleton-item variant="text" style="height:20px"  />
                                <el-skeleton-item variant="text" style="height:20px"  />
                                <el-skeleton-item variant="text" style="height:50px;width:40%"  />
                            </div>
                        </div>
                        </template>
                    </el-skeleton>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </div>
        </div>
        <div class="conference-container">
            <div class="title">
                <Icon type="md-apps" size="35" color="#999"></Icon>
                <h3 style="margin-left:10px;font-size:18px">全部会议 
                    <sort sort_title="时间" sort_key="ju_ban_shi_jian" :sort_list.sync="conference_list" :class="sort_index==1&&'sort-active'" @click.native="sort_index=1;" />    
                    <sort sort_title="届数" sort_key="jie_shu" :sort_list.sync="conference_list" :class="sort_index==2&&'sort-active'" @click.native="sort_index=2"/>    
                    <span style="color:#888;font-weight:normal;font-size:15px;margin-left:10px" v-if="conference_title"> > {{conference_title}}</span>
                </h3>
            </div>
            <Divider style="margin-top:15px;width:200px !important" />
            <div v-if="!list_filter.length&&!loading" style="text-align:center" class="animated fadeInUp">
                <img src="../assets/noresult.svg" alt="" width="200px" height="175px">
                <br>
                <span style="margin-right:0;margin-top:20px;font-size:18px">暂时没有结果，换一些关键词试试吧~</span>
            </div>
            <div>
                <div class="conference-list" v-for="(item,index) in list_filter.slice((pageNumber-1)*6,pageNumber*6)" :key="index">

                    <div class="list-time">会议时间<br>{{item.ju_ban_shi_jian}}</div>
                    <div class="list-left"><img :src="getImg(item.ming_cheng)" alt=""></div>
                    <div class="list-right">
                        <div v-html="highlightHTML(item.ming_cheng,searchKey)">
                            <!-- <Icon type="md-medal" :size="25" color="tomato" /> -->
                        </div>
                        <div>
                            <span><Icon type="ios-pin-outline" style="font-weight:bolder" /> {{item.di_dian?item.di_dian:'online'}}</span>
                            <span v-if="item.jie_shu"><Icon type="md-time" /> 第{{item.jie_shu}}届 </span>
                        </div>
                        <div>
                            网站：<a aria-disabled="true" :href="item.wang_zhan" target="_blank ">{{item.wang_zhan||'暂无'}}</a>
                        </div>
                        <div v-if="item.suo_shu_zi_ling_yu">
                            <Button class="tag-btn" v-for="(sub_item,index) in item.suo_shu_zi_ling_yu.split(/[,，；;]/)" :key="index">{{sub_item}}</Button>
                        </div>
                        <Divider />
                    </div>
                </div>
                <Page v-if="list_filter.length" class="pages" :total="list_filter.length"  :current="pageNumber"  :page-size="6"  @on-change="getPageInfo" />
            </div>
        </div>
    </div>
</template>


<script>
    import sort from '../components/sort.vue'
    import search from '../components/topSearch.vue'
    import conferenceService from '@/service/t_conference'
    import utils from '../utils/utils'  
    export default {
        components:{sort,search},
        data() {
            return {
                searchKey:'',
                conference_title:'',
                sort_index:1,
                pageNumber:1,
                totalPages:0,
                loading:true,
                swiperOption: {
                    autoplay: {
                        delay: 3000
                    },
                    loop: true,
                    speed: 2000,
                    slidesPerView: "auto",
                    spaceBetween: 20,
                    pagination: {
                        el: '.swiper-pagination'
                    }
                },
                jqzk: [],
                conference_list: [],
            }
        },
        computed:{
            list_filter(){
                return this.conference_list.filter(item=>{return item.ming_cheng?item.ming_cheng.toLowerCase().includes(this.conference_title.toLowerCase()):false})
            }
        },
        mounted() {
            this.$route.params.searchKey&&(this.searchKey=this.$route.params.searchKey)&&(this.conference_title=this.$route.params.searchKey);

            this.$Loading.finish();
            this.getData();
        },
        methods:{
            getData(opt){
                if(!opt){
                    opt = {
                        order:[['ju_ban_shi_jian',1]],
                    }
                }
                conferenceService.getTConferenceList({
                    ...opt,
                    pageNumber:this.pageNumber,
                    pageSize:20,
                    // columns: ['id', 'ming_cheng', 'di_dian', 'jie_shu', 'ju_ban_dan_wei', 'wang_zhan', 'ju_ban_shi_jian','suo_shu_zi_ling_yu'],
                }).then(res => {
                    console.log(res);
                    this.conference_list = res.data;
                    this.jqzk = res.data.slice(0,4);
                    this.totalPages = res.total;
                    this.loading = false;
                });
                
            },
            getPageInfo(currentIndex){
                this.pageNumber = currentIndex;
                document.querySelector('.conference-container').scrollIntoView(true);
            },
            search(){
                this.conference_title = this.searchKey;
                this.pageNumber = 1;
                document.querySelector('.conference-container').scrollIntoView(true);
            },
            //搜索结果高亮
            highlightHTML(html,searchKey){
                return utils.highlightHTML(html,searchKey)
            },
            //获取图片
            getImg(title){
                return require("../assets/"+title+".jpg")
            }
        }
    }
</script>

<style lang="scss" scoped>
    .conference {
        overflow: hidden;
        position: relative;
        background: rgb(250, 250, 250);
        h3 /deep/ .sort:nth-of-type(1){
            margin-left: 50px;
        }
        .sort-active{
            color: #83a2f1;
        }

        .jqzk {
            margin-top: -100px;

            .jqzk-title {
                background: var(--single-color);
                box-shadow: 0 0 10px 0px #1b1b1b96;
                position: relative;
                color: white;
                margin-top: 20px;
                font-weight: normal;
                font-size: 16px;
                width: 150px;
                margin: auto;
                padding: 12px 20px;
                border-radius: 5px;
                font-weight: bold;
                transform: translateY(15px);
                z-index: 12;
                border-bottom: 5px solid #eee;
            }
        }

        .my-swiper {
            border: 40px solid white;
            border-bottom: 20px;
            width: 80%;
            margin-left: 10%;
            color: #000;
            background: white;
            margin-bottom: 50px;
            box-shadow: 1px 1.732px 60px 0px rgba(0, 0, 0, 0.1);
            padding: 10px;
            padding-bottom: 80px;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            min-height: 480px;

            /deep/ .swiper-pagination-bullets {
                bottom: 30px;
            }

            .swiper-slide {
                color: white;
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 350px;
                text-align: left;
                width: calc(100% / 3 - 10px);

                img {
                    width: 80px;
                }

                >p {
                    color: black;
                    margin-top: 5px;
                    margin-bottom: 5px;
                    color: #888;
                }

                .c-title {
                    color: #111;
                    font-weight: bold;
                    font-size: 18px;
                }

                .c-theme {
                    height: 150px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: none;
                }

                button {
                    background: var(--single-color);
                    padding: 10px 25px;
                    border: none;
                    margin-top: 10px;
                    width: 120px;
                    border-radius: 3px;
                    box-shadow: 1px 1.5px 10px 0px rgba(0, 0, 0, 0.212);

                    a {
                        color: white;
                    }
                }
            }
        }

        .swiper-button-prev,
        .swiper-button-next {
            outline: none;
        }

        /deep/ .swiper-pagination-bullet-active {
            background: #83a2f1;
        }

        /deep/ .swiper-pagination-bullet {
            transition: all 0.6s ease;
            width: 50px;
            height: 3px;
            border-radius: 5px;
        }

        .conference-container {
            /deep/ .ivu-divider-horizontal {
                width: 55vw;
                // flex-shrink: 0;
            }

            background: white;
            padding: 30px 12%;
            text-align: left;

            .title {
                display: flex;
                flex-direction: row;
                align-items: center;
                white-space: nowrap;
                overflow: hidden;
                margin-right: 15px;
            }

            .conference-list {
                position: relative;
                display: flex;
                flex-direction: row;
                align-items: center;
                height: 200px;
            }

            .conference-list:nth-last-of-type(1) .list-time::before {
                display: none;
            }

            .list-time {
                position: relative;
                font-size: 16px;
                font-weight: bold;
                margin: 10px 20px;
                margin-right: 70px;
                color: #666;
                padding: 0;
                flex-shrink: 0;
            }

            .list-time:after {
                position: absolute;
                left: -10px;
                display: inline-block;
                height: 20px;
                width: 20px;
                background: rgb(245, 245, 245);
                border: 4px solid #83a2f1;
                border-radius: 10rem;
                content: '';
                transform: translateX(-100%) translateY(-50%);
                top: 50%;
            }

            .list-time:before {
                position: absolute;
                display: inline-block;
                content: '';
                height: 184px;
                width: 3px;
                background: rgb(245, 245, 245);
                left: -22px;
                top: 33px;
            }

            .list-left {
                margin-right: 30px;

                img {
                    width: 90px;
                    height: 120px;
                    margin-right: 30px;
                }
            }

            .list-right>div {
                margin-top: 10px;
                margin-bottom: 10px;
            }

            .list-right>div:nth-child(1) {
                color: #4eadca;
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 10px;
            }

            .list-right>div:nth-child(2) {
                color: #888;
                font-size: 15px;
            }

            .list-right>div:nth-child(3) {
                color: #888;
                max-height: 200px;
                line-height: 2;
                text-overflow: ellipsis !important;
                overflow: hidden;
                // margin-top: 10px;
            }

            .tag-btn {
                padding: 5px;
                margin-right: 5px;
                font-size: 12px;
                margin-bottom: 10px;
            }

            .pages {
                text-align: center;
            }

            /deep/ .ivu-page-item,
            /deep/ .ivu-page-next,
            /deep/ .ivu-page-prev {
                margin-bottom: 10px;
            }
        }
    }

    @media (max-width:1060px) {
        .pc1,.pc2{
            display: none;
        }
        .conference {
            h3 /deep/ .sort:nth-of-type(1){
                margin-left: 15px;
            }
        }

        .conference-container {
            padding: 20px 20px !important;
            .conference-list {
                display: flex;
                flex-direction: column !important;
                align-items: center;
                height: auto !important;
                >img {
                    display: none;
                }
                .list-time {
                    display: none;
                }
                /deep/ .ivu-divider-horizontal {
                    width: 90vw;
                }
                .list-left img {
                    margin-right: 0;
                }
            }
        }

        .my-swiper {
            width: 90% !important;
            margin-left: 5% !important;
        }

        .swiper-slide {
            img {
                width: 60px !important;
            }

            width: 100% !important;
            .c-theme {
                height: 150px !important;
            }
        }
    }
</style>